﻿<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>在线投票</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <style type="text/css">
        * {
            margin: auto;
            padding: 0;
        }

        .max {
            height: 100%;
            width: 100%;
        }

            .max img {
                height: 100%;
                width: 100%;
            }

        .play1 {
            height: 40%;
            width: 35%;
            position: absolute;
            left: 10%;
            top: 5%;
        }

        .play2 {
            height: 40%;
            width: 35%;
            position: absolute;
            right: 10%;
            bottom: 5%;
        }

        .play1 img {
            border-radius: 50%;
            overflow: hidden;
            width: 100%;
            height: 35vw;
            position: absolute;
            z-index: 100;
        }

        .play2 img {
            border-radius: 50%;
            overflow: hidden;
            width: 100%;
            height: 35vw;
            position: absolute;
            z-index: 100;
        }

        p {
            height: 10%;
            width: 100%;
            text-align: center;
            font-size: 200%;
            font-weight: 600;
        }

        input[type=button] {
            background-color: skyblue;
            height: 20%;
            width: 60%;
            margin-left: 20%;
            font-size: 40px;
            border-radius:20%;
            overflow:inherit;
        }

        .p1 {
            width: 100%;
            height: 18vw;
            position: absolute;
        }

        .p2 {
            width: 100%;
            height: 70%;
            background-color: #ffffff;
            position: absolute;
            top: 30%;
            z-index: 2;
            border: solid 2px black;
        }

            .p2 .p21 {
                margin-top: 60%;
            }
    </style>
</head>

<body>
    <div class="max">
        <img src="Content/img/vote.jpg">
        <div class="play1">
            <div class="p1"></div>
            <img src="Content/img/play1.jpg">
            <div class="p2">
                <p class="p21">Play1</p>
                <p>凤一</p>
                <input type="button" onclick=""  value="投票" />
            </div>
        </div>
        <div class="play2">
            <div class="p1"></div>
            <img src="Content/img/play2.jpg">
            <div class="p2">
                <p class="p21">Play2</p>
                <p>凤二</p>
                <input type="button" onclick="" value="投票" />
            </div>
        </div>
    </div>
    <div class="hidden" id="mpiId"></div>    
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: "/Voting/GetMatchPKInfo",
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    if (data == 0) {
                        Jump();
                        return;
                    }
                    $("#mpiId").val(data.ID);

                    $(".play1 img").attr("src", "" + data.FirstPlayer.PlayerImage);
                    $(".play1 .p21").text(data.FirstPlayer.PlayerNO+"号");
                    $(".play1 div p").next().text(data.FirstPlayer.PlayerName)
                    $(".play1 input[type='button']").attr("onclick", " Voting(1)");

                    $(".play2 img").attr("src", "" + data.SecondPlayer.PlayerImage);
                    $(".play2 .p21").text(data.SecondPlayer.PlayerNO+"号")
                    $(".play2 div p").next().html(data.SecondPlayer.PlayerName)
                    $(".play2 input[type='button']").attr("onclick", " Voting(2)")
                },
                error: function () {
                    window.open("/VotingWaiting.html")
                }
            });

            var Jump = function () {
                window.location.href = 'VotingWaiting.html';
                //self.location = "VotingWaiting.html";
            }
        });

        //投票
        function Voting(type) {

            var mpiId = $("#mpiId").val();
            var Tstate = localStorage.getItem("Tstate" + mpiId);
            if (Tstate) {
                alert("您已经投过票了，请勿再次投票");
                return;
            }

            $.ajax({
                url: "Voting/TicketAdd",
                data: { MpiId: mpiId, Type: type },
                type: "POST",
                dataType: "JSON",
                success: function (rv) {
                    localStorage.setItem("Tstate" + mpiId, "true");
                    alert(rv == 1 ? "投票成功" : "投票失败");
                },
                error: function () {
                    alert("投票失败，请重新投票");
                }
            });
        }
    </script>
</body>

</html>